<template>
   <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: 'bb759b8b55676f226f05383793b44ecc'
}
export default {
  data () {
    return {
      map: null
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods:{
    // 初始化地图
    initMap(){
      AMapLoader.load({
        key:"f4244b9bedd4eba91b9a3e27ba40b348",    // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins:['AMap.Geolocation'],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom: 12,           //初始化地图级别
          center:[111.473667, 31.230525], //初始化地图中心点位置
        });
        let that = this;

        // 定位的配置
        AMap.plugin('AMap.Geolocation', function() {
          let geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认：true
            timeout: 10000, // 设置定位超时时间，默认：无穷大
            offset: [10, 20],  // 定位按钮的停靠位置的偏移量
            zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            position: 'RB',//  定位按钮的排放位置,  RB表示右下
            GeoLocationFirst: true
          })
          geolocation.getCurrentPosition(function(status,result){
            console.log("result=", result)
            // 逆地理编码
            AMap.plugin('AMap.Geocoder', function() {
              let geocoder = new AMap.Geocoder({});
              geocoder.getAddress(result.position, function(status, resulttwo) {
                if (status === 'complete' && resulttwo.info === 'OK') {
                  // 输出经纬度和详细地址
                  console.log('Marker的经纬度：', result.position);
                  console.log('详细地址：', resulttwo);
                  that.$store.commit('user/changelong', result.position);
                  that.$store.commit('user/changeadress', resulttwo.regeocode);
                }
              });
            });
          });
          that.map.addControl(geolocation);
        });

     // 创建一个marker并设置在地图中心
        let marker = new AMap.Marker({
              position: that.map.getCenter(),
              map: that.map
            });
        // 监听地图拖动事件
        that.map.on('dragging', function () {
          // 获取地图中心的经纬度
          let center = that.map.getCenter();
          // 更新marker的位置
          marker.setPosition(center);

        });
        // 监听地图拖动事件结束
        that.map.on('dragend', function () {
              // 获取地图中心的经纬度
              let center = that.map.getCenter();
             // 更新marker的位置
              marker.setPosition(center);
              console.log('center',center)
            // 逆地理编码
              AMap.plugin('AMap.Geocoder', function() {
              let geocoder = new AMap.Geocoder({});
              geocoder.getAddress(center, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  // 输出经纬度和详细地址
                  console.log('Marker的经纬度：', center);
                  console.log('详细地址：', result);
                  that.$store.commit('user/changelong', center);
                  that.$store.commit('user/changeadress', result.regeocode);
                }
              });
            });
          });

        // 直接配置定位
        // this.map.addControl(new AMap.Geolocation())
      }).catch(e=>{
        console.log(e);
      })
    },

  },
}
</script>

<style lang="less" scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }


</style>
